<template>
    <div>

        <div class="page coach-page">
            <div class="banner">
                <div class="banner-image" style="background-image: url('/images/training_detail_banner.jpg')">
                    <span>商务合作</span>
                    <p>BUSINESS COOPERATION</p>
                </div>
            </div>
        </div>
        <div class="content busines-cooperation">

            <div class="training-content coach-page" style="padding-top: 0;">
                <div class="aboutus-header display-flex-row justify-content-between">
                    <div class="aboutus-header-left display-flex-row align-items-center">
                        <img src="/images/ball.png" alt="">
                        <div class="aboutus-title">
                            <div class="title">BUSINESS<span>COOPERATION</span></div>
                            <p>商务合作</p>
                        </div>
                    </div>
                    <div class="aboutus-crumb display-flex-row align-items-bottom">
                        当前位置：
                        <router-link to="/">首页></router-link>
                        <a>商务合作</a>
                    </div>
                </div>
                <div class="message-map display-flex-row">
                    <div class="busines-map">
                        <div style="width:100%;height:100%;" id="dituContent">
                            <map2 :center="datalist.coordinate|fltercoo" :content="datalist.name"></map2>
                        </div>
                    </div>
                    <div class="busines-content flex1">
                        <div class="busines-name">链星青训平台办事处</div>
                        <div class="busines-con">
                            <div class="busines-info display-flex-row">
                                <img src="/images/phone.png" alt="">
                                <div class="busines-memo flex1">
                                    <p class="strong">{{datalist.phone}}</p>
                                </div>
                            </div>
                            <div class="busines-info display-flex-row">
                                <div class="busines-memo flex1">
                                    <p class="strong">{{datalist.landline}}</p>
                                    <p>周一至周日 9：00~22:00</p>
                                </div>
                            </div>
                            <div class="busines-info display-flex-row bottom-line">
                                <img src="/images/email.png" alt="">
                                <div class="busines-memo flex1">
                                    <p>邮编：200000</p>
                                </div>
                            </div>
                            <div class="busines-info display-flex-row">
                                <img src="/images/location.png" alt="">
                                <div class="busines-memo flex1">
                                    <p>平台地址：{{datalist.schoolAddress }}</p>
                                </div>
                            </div>
                            <div class="busines-info display-flex-row">
                                <img src="/images/car.png" alt="">
                                <div class="busines-memo flex1">
                                    <p>来访请提前电话预约</p>
<!--                                    <p>自驾车：{{datalist.sedan }}</p>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="micro-blog display-flex-row">
                    <div class="micro-code display-flex-row">
                        <img :src="datalist.leftImg|filtersImg"/>
                        <div class="flex1">
                            <p class="micro-name">{{datalist.leftImgName }}</p>
                            <p class="micro-synopsis">扫一扫关注我们</p>
                            <p class="micro-synopsis">了解最新资讯</p>
                        </div>
                    </div>
                    <div class="micro-code busines-content flex1 display-flex-row">

                        <img :src="datalist.rightImg|filtersImg "/>
                        <div class="flex1">
                            <p class="micro-name">{{datalist.rightImgName }}</p>
                            <p class="micro-synopsis">扫一扫关注我们</p>
                            <p class="micro-synopsis">了解最新资讯</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import {configGetBusinessAffairs} from "../../api/api/web.js"
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';
    import map2 from "@/components/map.vue";

    export default {
        data() {
            return {
                datalist: {}
            }
        },
        components: {
            map2
        },
        created() {
            configGetBusinessAffairs().then((res) => {
                this.datalist = res.data
            }).catch((res) => {
                this.$message({
                    message: res.message,
                    type: 'error',
                    duration: 5 * 1000
                });
            })
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            fltercoo: function (e) {
                return JSON.parse(e)
            },
        },
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");
</style>
